{% extends "adminBase.html" %}

{% block extrahead %}
<link rel="stylesheet" href="/site_media/css/rexnex.css" />

<script type="text/javascript" src="/site_media/scripts/jquery/jquery.pack.js"></script>
<script type="text/javascript" src="/site_media/scripts/jquery/jquery.form.js"></script>
<script type="text/javascript" src="/site_media/scripts/jquery/jquery.alphanumeric.pack.js"></script>
<script type="text/javascript" src="/site_media/scripts/yav.js"></script>
<script type="text/javascript" src="/site_media/scripts/jquery/jquery.yav.pack.js"></script>
<script type="text/javascript" src="/site_media/scripts/jquery/jquery.dimensions.pack.js"></script>
<script src="/site_media/scripts/pointsTable.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/site_media/scripts/points.js"></script>


<script type="text/javascript" charset="utf-8">
	// prepare the form when the DOM is ready 
	$(document).ready(function() { 
		//Init a points object
		points = new et_points();
		
		$("#componentForm").yav({
			errorClass:"error",
			errorTag:"p",
			errorPosition:"after",
			onOk: function(){
				$('#componentForm').ajaxSubmit({target: '#message' });
				$('#message').fadeIn('3000');
				setTimeout("$('#message').fadeOut('3000');", 2000)
				return false; 
			}
			
		},{
			inputclasserror: "fieldError",
		});
		
		$('.offerFormulationInputs').numeric();
		$('#refreshValues').click(function(){
			// Clear any errors from the last press
			$(".offerError").html("");
			
			points.p1x = $("#p1x").val();
			points.p2x = $("#p2x").val();
			points.p1y = $("#p1y").val();
			points.p2y = $("#p2y").val();
			points.p1xMaxRequest = $("#p1xMaxRequest").val();
			points.p2xMaxRequest = $("#p2xMaxRequest").val();
			points.p1yMaxRequest = $("#p1yMaxRequest").val();
			points.p2yMaxRequest = $("#p2yMaxRequest").val();
			points.p1xValue_raw = $("#p1xValue").val();
			points.p2xValue_raw = $("#p2xValue").val();
			points.p1yValue_raw = $("#p1yValue").val();
			points.p2yValue_raw = $("#p2yValue").val();
			points.offeredBy = $('#whichPlayer').val();
			points.offer = $("#offerFormulationOffer").val();
			points.request = $("#offerFormulationRequest").val();
			points.offerUnit = $("#offerFormulationOfferUnit").val();
			points.requestUnit = $("#offerFormulationRequestUnit").val();
			response = points.calculatePoints();
			if(!response.error){
				$("#p1InitialPoints").html(String(response.p1InitialPoints));
				$("#p2InitialPoints").html(String(response.p2InitialPoints));
				$("#p1Points_justExchange").html(String(response.p1Points_justExchange));
				$("#p2Points_justExchange").html(String(response.p2Points_justExchange));
				$("#p1Points").html(String(response.p1Points));
				$("#p2Points").html(String(response.p2Points));
			} else {
				console.dir(response);
				$(".previewField").html("--");
				switch(response.errorMsg){
					case "Insufficient funds for offer":
						$("#offerFormulationOfferError").html("Insufficient " + points.offerUnit);
						break;
					case "Exceeded max request":
						$("#offerFormulationRequestError").html("Request less " + points.requestUnit);
						break;
					default:
						alert(response.errorMsg);
				}
			}
		});
		$("#variableListToggle").click(function() {
			$("#possibleVariables").slideToggle(300);
			return false;
		});
	});

</script>
{% endblock %}

{% block bodyid %}tab3{% endblock %}

{% block sectionDivID %}components{% endblock %}

{% block adminContent %}
<div id="breadCrumbs">
<a href="/components">Components</a> » {{ component.name }}
</div>

<h1>Editing {{ component.name }}</h1>
<form action="/nex/submit/" method="post" accept-charset="utf-8" id="componentForm">
<table border="0" cellspacing="5" cellpadding="5">
	<tr>
		<th>Component Name: </th>
		<td><input type="text" name="componentName" id="componentName" value="{{ component.name }}" size="40" maxlength="200" class="required" title="You must enter a component name."/></td>
	</tr>
	<tr>
		<th>Component Description: </th>
		<td><textarea name="componentDescription" rows="2" cols="43">{{ component.description }}</textarea></td>
	</tr>
</table>
<h2>Points</h2>
<table>
	<tr>
		<td></td>
		<th>Player 1</th>
		<th>Player 2</th>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td rowspan="12">
			<div id="valuePreview">
				<h3>XY Value Tester</h3>
				<p>Use this form to test how many points an offer will get each player. The initial and value fields to the left are used to calculate points.</p>
				<h4>Offer Setup</h4>
				<p>Who is the offer from?</p>
				<p>
				<select name="whichPlayer" id="whichPlayer">
					<option value="p1">Player 1</option>
					<option value="p2">Player 2</option>
				</select>
				</p>
				<p>What will the player give?</p>
				<p>
					<input type="text" name="offerFormulationOffer" id="offerFormulationOffer" class="offerFormulationInputs" value="0" size="4"/>
					<select name="offerFormulationOfferUnit" id="offerFormulationOfferUnit">
						<option>x</option>
						<option>y</option>
					</select>
					<span id="offerFormulationOfferError" class="offerError"></span>
				</p>
				<p>What does the player want in return?</p>
				<p>
					<input type="text" name="offerFormulationRequest" id="offerFormulationRequest" class="offerFormulationInputs" value="0" size="4"/>
					<select name="offerFormulationRequestUnit" id="offerFormulationRequestUnit">
						<option>y</option>
						<option>x</option>
					</select>
					<span id="offerFormulationRequestError" class="offerError"></span>
				</p>
				<h4>Points</h4>
				<table border="0">
					<tr>
						<th></th>
						<th>Player 1</th>
						<th>Player 2</th>
					</tr>
					<tr>
						<th>Initial</th>
						<td id="p1InitialPoints" class="previewField">--</td>
						<td id="p2InitialPoints" class="previewField">--</td>
					</tr>
					<tr>
						<th>gain/loss</th>
						<td id="p1Points_justExchange" class="previewField">--</td>
						<td id="p2Points_justExchange" class="previewField">--</td>
					</tr>
					<tr>
						<th>Final</th>
						<td id="p1Points" class="previewField">--</td>
						<td id="p2Points" class="previewField">--</td>
					</tr>
				</table>
				
				<input type="button" name="refreshValues" value="Refresh Points" id="refreshValues">

			</div>
		</td>
	</tr>
	<tr>
		<th>Initial X</th>
		<td><input type="text" name="p1x" value="{{parameters.p1x}}" size="3" id="p1x" class="required integer" title="You must enter an integer value."/></td>
		<td><input type="text" name="p2x" value="{{parameters.p2x}}" size="3" id="p2x" class="required integer" title="You must enter an integer value."/></td>
	</tr>
	<tr>
		<th>Initial Y</th>
		<td><input type="text" name="p1y" value="{{parameters.p1y}}" size="3" id="p1y" class="required integer" title="You must enter an integer value."/></td>
		<td><input type="text" name="p2y" value="{{parameters.p2y}}" size="3" id="p2y" class="required integer" title="You must enter an integer value."/></td>
	</tr>
	<tr>
		<th>X Value</th>
		<td><input type="text" name="p1xValue" value="{{parameters.p1xValue}}" size="20" id="p1xValue" class="required" title="You must enter a value."/></td>
		<td><input type="text" name="p2xValue" value="{{parameters.p2xValue}}" size="20" id="p2xValue" class="required" title="You must enter a value."/></td>
	</tr>
	<tr>
		<th>Y Value</th>
		<td><input type="text" name="p1yValue" value="{{parameters.p1yValue}}" size="20" id="p1yValue" class="required" title="You must enter a value."/></td>
		<td><input type="text" name="p2yValue" value="{{parameters.p2yValue}}" size="20" id="p2yValue" class="required" title="You must enter a value."/></td>
	</tr>
	<tr>
		<th></th>
		<td colspan="2"><a href="#" id="variableListToggle">Toggle Variable List</a></td>
	</tr>
	<tr>
		<th></th>
		<td colspan="2">
			<div id="possibleVariables">
				Use these variables when constructing value formulas. You can also use JavaScript <a href="http://www.google.com/search?q=javascript%20math%20functions" target="_blank">math functions</a>. 
				<br/> <code>Example: Ox * 2</code>
				<br/> <code>Example: 2 + (Axo / 2)</code>
				<br/> <code>Example: Math.pow(Ox,2)</code>
				<table>
					<tr>
						<th>Variable</th>
						<th>Description</th>
					</tr>
					<tr>
						<td>Ox</td>
						<td>The number of X's offered</td>
					</tr>
					<tr>
						<td>Oy</td>
						<td>The number of Y's offered</td>
					</tr>
					<tr>
						<td>Rx</td>
						<td>The number of X's requested</td>
					</tr>
					<tr>	
						<td>Ry</td>
						<td>The number of Y's requested</td>
					</tr>
					<tr>
						<td>Axo</td>
						<td>The number of X's available to the offerer</td>
					</tr>
					<tr>
						<td>Ayo</td>
						<td>The number of Y's available to the offerer</td>
					</tr>
					<tr>
						<td>Axr</td>
						<td>The number of X's available to the requester</td>
					</tr>
					<tr>
						<td>Ayr</td>
						<td>The number of Y's available to the requester</td>
					</tr>
				</table>
			</div>
		</td>
	<tr>
		<th>Replenish X</th>
		<td><input type="text" name="p1xReplenish" value="{{parameters.p1xReplenish}}" size="3" id="p1xReplenish" class="required integer" title="You must enter an integer value."/></td>
		<td><input type="text" name="p2xReplenish" value="{{parameters.p2xReplenish}}" size="3" id="p2xReplenish" class="required integer" title="You must enter an integer value."/></td>
	</tr>
	<tr>
		<th>Replenish Y</th>
		<td><input type="text" name="p1yReplenish" value="{{parameters.p1yReplenish}}" size="3" id="p1yReplenish" class="required integer" title="You must enter an integer value."/></td>
		<td><input type="text" name="p2yReplenish" value="{{parameters.p2yReplenish}}" size="3" id="p2yReplenish" class="required integer" title="You must enter an integer value."/></td>
	</tr>
	<tr>
		<th>Clear X and Y</th>
		<td>
			<select name="p1Clearing">
				<option {% ifequal parameters.p1Clearing "End of exchange opportunity" %}selected="selected"{% endifequal %} >End of exchange opportunity</option>
				<option {% ifequal parameters.p1Clearing "End of pairing" %}selected="selected"{% endifequal %}>End of pairing</option>
			</select>
		</td>
		<td>
			<select name="p2Clearing">
				<option {% ifequal parameters.p2Clearing "End of exchange opportunity" %}selected="selected"{% endifequal %} >End of exchange opportunity</option>
				<option {% ifequal parameters.p2Clearing "End of pairing" %}selected="selected"{% endifequal %}>End of pairing</option>
			</select>
		</td>
	</tr>
	<tr>
		<th>Max X Request</th>
		<td><input type="text" name="p1xMaxRequest" value="{{parameters.p1xMaxRequest}}" size="3" id="p1xMaxRequest" class="required integer" title="You must enter an integer value."/></td>
		<td><input type="text" name="p2xMaxRequest" value="{{parameters.p2xMaxRequest}}" size="3" id="p2xMaxRequest" class="required integer" title="You must enter an integer value."/></td>
	</tr>
	<tr>
		<th>Max Y Request</th>
		<td><input type="text" name="p1yMaxRequest" value="{{parameters.p1yMaxRequest}}" size="3" id="p1yMaxRequest" class="required integer" title="You must enter an integer value."/></td>
		<td><input type="text" name="p2yMaxRequest" value="{{parameters.p2yMaxRequest}}" size="3" id="p2yMaxRequest" class="required integer" title="You must enter an integer value."/></td>
	</tr>
</table>
{% include "widgets/addWidgets.html" %}
<h2>Options</h2>
<p><input type="checkbox" name="nonBinding" {% if parameters.nonBinding %}checked="checked"{% endif %} /> Non-binding</p>
<p><input type="checkbox" name="showPoints" {% if parameters.showPoints %}checked="checked"{% endif %}/> Show point value</p>
<p><input type="checkbox" name="resetPoints" {% if parameters.resetPoints %}checked="checked"{% endif %}/> Reset points at end of round</p>
<p>Display Name (Shown to Deciders)<br/><input type="text" name="displayName"  value="{{component.displayName}}" size="25"  id="displayName"  class="required" title="You must enter a display name"/></p>

	<p><input type="hidden" name="comIM" value="{{ component.id }}"/><input type="submit" value="Save Changes" class="buttonSmall"/></p>
	<div id="message">

	</div>
</form>
{% endblock %}